<template>
    <div style="width: 100%; height: 90%">
        <div class="chart4"></div>
    </div>
</template>
  
<script>
import apis from '@/apis/api'
import * as echarts from "echarts";
export default {
    // props: ['list'],
    data() {
        return {
            list: []
        }
    },
    mounted() {
        this.getList()
    },
    computed: {},

    methods: {
        getList() {
            /** 本年度事件趋势图 */
            apis.analysisYear({}).then(result => {
                let res = result.data;
                this.list = res;
                // this.databox4 = res;
                this.init()
            });
        },
        init() {
            var myChart = echarts.init(document.querySelector(".chart4"));

            let option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        lineStyle: {
                            color: "#dddc6b"
                        }
                    }
                },
                legend: {
                    show: false
                },
                grid: {
                    left: "10",
                    top: "30",
                    right: "2%",
                    bottom: "1%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255,1)",
                                fontSize: 12
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.2)"
                            }
                        },
                        data: this.list.map(i=>i.name+'月')
                        // ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']                
                    },
                    {
                        axisPointer: { show: false },
                        axisLine: { show: false },
                        position: "bottom",
                        offset: 20
                    }
                ],

                yAxis: [
                    {
                        type: "value",
                        axisTick: { show: false },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: "rgba(255,255,255, 1)",
                                fontSize: 12
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)"
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: "事件量",
                        type: "line",
                        smooth: true,
                        // symbol: "circle",
                        // symbolSize: 5,
                        // showSymbol: true,
                        lineStyle: {
                            normal: {
                                color: "#7a2b58",
                                width: 2
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        {
                                            offset: 0,
                                            color: "#b52b44"
                                        },
                                        {
                                            offset: 0.8,
                                            color: "#3e2b7c"
                                        }
                                    ],
                                    false
                                ),
                                shadowColor: "rgba(0, 0, 0, 0.1)"
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: "#0184d5",
                                borderColor: "rgba(221, 220, 107, .1)",
                                borderWidth: 12
                            }
                        },
                        data: this.list
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.chart4 {
    width: 100%;
    height: 100%;
}
</style>